<template>
  <el-container class="empolder-document">
    <el-aside class="fixed-tree" width="200px">
      <el-menu class="empolder-menu" background-color="#fff" text-color="#333" active-text-color="#3d8fe9">
        <el-submenu v-for="(item, index) in menu" :key="index" :index="item.label">
          <span slot="title">{{item.label}}</span>
          <el-menu-item v-for="it in item.children" :key="it.id" :index="it.label" @click="handleNodeClick(it.id)">
            {{it.label}}
          </el-menu-item>
        </el-submenu>
      </el-menu>
    </el-aside>
    <el-main class="p0 ml200">
      <div class="outside-the-box">
        <div class="contain-box document-box" v-if="is_message_show">
          <header>接口文档</header>
          <div class="main-box">
            <div class="document-list" v-for="(item, index) in document" :key="index">
              <h3>{{index + 1}}、{{item.title}}</h3>
              <div class="document-detail mt20">
                <p class="mt20">请求方式：{{item.method}}</p>
                <p class="mt20">地址：{{item.addr}}</p>
                <p class="mt20">发送数据格式：</p>
                <div class="document-detail-img-block mt20">
                  <img :src="item.sendFormat" alt="sendFormat">
                </div>
              </div>
              <div class="mt20">
                参数说明：
                <div class="document-detail">
                  <el-table :header-cell-style="getRowClass" :data="item.param" border class="mt20">
                    <el-table-column prop="key" label="参数"></el-table-column>
                    <el-table-column prop="need" label="必须"></el-table-column>
                    <el-table-column prop="desc" label="说明"></el-table-column>
                  </el-table>
                  <p class="mt20">备注：{{item.remark}}</p>
                  <p class="mt20">返回数据格式:</p>
                  <div class="document-detail-img-block mt20">
                    <img :src="item.return" alt="return">
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

    </el-main>
  </el-container>
</template>

<script>
import doc from "@/api/document.js";

export default {
  name: "empolder-documentation",
  data() {
    return {
      menu: undefined,
      document: undefined,
      props: {
        children: "children",
        value: "id",
        label: "label"
      },
      is_message_show: false
    };
  },
  methods: {
    handleNodeClick(id) {
      this.is_message_show = true;
      doc.getApiDocument(id).then(res => {
        this.document = res;
      });
    },
    getRowClass({ row, column, rowIndex, colIndex }) {
      if (rowIndex === 0) {
        return "background:#f5f7f9";
      }
    }
  },
  mounted() {
    doc.getApiMenu().then(res => {
      this.menu = res;
    });
  }
};
</script>

<style>
.document-box {
  overflow: hidden;
  margin-left: 200px;
  width: 84%;
  min-height: 400px;
  max-width: 1200px;
  margin: 46px auto;
}
.document-list {
  padding-bottom: 20px;
  border-bottom: 1px solid #ccc;
}
.document-list:last-of-type {
  border: none;
}
.document-detail {
  padding-left: 30px;
}
.document-detail-img-block {
  width: 600px;
}
.document-detail-img-block > img {
  width: 100%;
}
</style>
